
<template>
  <div id="oder-list" class="app-container calendar-list-container">
    <div class="filter-container">
      <el-form :inline="true" ref="ruleForm">
        <el-form-item>
          <el-button
            icon="el-icon-circle-plus-outline"
            type="button"
            class="el-button el-button--primary"
            @click="
              dialogFormVisible = true;
              diaTitle = '添加资源';
              isCreate = 'true';
            "
          >
            添加资源</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="query.nameKeyword"
            placeholder="请输入资源名称"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="query.urlKeyword"
            placeholder="请输入资源url"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="button"
            class="el-button el-button--primary"
            @click="resourceSearch"
          >
            查询</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button
            type="button"
            class="el-button el-button--primary"
            @click="clear"
          >
            清空</el-button
          >
        </el-form-item>

      </el-form>
    </div>
    <!-- 表格 -->
    <el-table
      :data="tableData"
      border
      v-loading="loading"
      element-loading-text="给我一点时间"
      style="width: 100%"
      :cell-style="{ textAlign: 'center' }"
      :header-cell-style="{ textAlign: 'center' }"
    >
      <el-table-column type="index" label="序号"> </el-table-column>
      <el-table-column prop="name" label="资源名称"></el-table-column>
      <el-table-column prop="id" label="ID"> </el-table-column>
      <el-table-column prop="createTime" label="创建时间"> </el-table-column>
      <el-table-column prop="description" label="说明"></el-table-column>
      <el-table-column prop="url" label="路径"></el-table-column>
      <el-table-column prop="operate" align="center" label="操作" width="400">
        <template slot-scope="scope">
          <div class="fx" style="display: flex">
            <el-button
              @click="editResource(scope.row)"
              type="button"
              icon="el-icon-edit"
              class="el-button el-button--primary"
              >修改</el-button
            >
            <el-button
              type="button"
              icon="el-icon-delete"
              class="el-button el-button--danger"
              @click="deleteResource(scope.row.id)"
              >删除</el-button
            >
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- //新增 修改 -->
    <el-dialog
      :title="diaTitle"
      :visible.sync="dialogFormVisible"
      @close="closeDialog"
      width="40%"
    >
      <el-form :model="createForm" :rules="rules" ref="createForm">
        <el-form-item
          prop="name"
          label="资源名称"
          :label-width="formLabelWidth"
        >
          <el-input v-model="createForm.name" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item prop="url" label="资源URL" :label-width="formLabelWidth">
          <el-input v-model="createForm.url" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item
          prop="description"
          label="描述"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="createForm.description"
            auto-complete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          prop="categoryId"
          label="资源分类ID"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="createForm.categoryId"
            auto-complete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button
          v-if="isCreate == 'true'"
          type="primary"
          @click="submitForm('createForm')"
          >创建</el-button
        >
        <el-button icon="el-icon-edit" v-else type="primary" @click="edit('createForm')">修改</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  Resource,
  createResource,
  editResource,
  deleteResource,
  resourceSearch,
} from "@/api/resource";
export default {
  data() {
    return {
      rules: {
        description: [
          { required: true, message: "请输入资源描述", trigger: "change" },
        ],
        name: [
          { required: true, message: "请输入资源名称", trigger: "change" },
        ],
        url: [{ required: true, message: "请输入资源地址", trigger: "change" }],
      },
      loading: false,
      total: 0,
      query: {
        categoryId: "", //资源分类ID
        nameKeyword: "", //资源名称关键字
        urlKeyword: "", //资源地址关键字
        pageNum: 1, //
        pageSize: 50, //
      },
      editID: "",
      isCreate: "",
      diaTitle: "",
      dialogFormVisible: false,
      formLabelWidth: "140px",
      tableData: [],
      createForm: {
        description: "", //资源描述
        name: "", //资源名称
        url: "", //资源地址
        categoryId: "", //资源ID
      },
    };
  },
  methods: {
    clear() {
      (this.query = {
        categoryId: "", //资源分类ID
        nameKeyword: "", //资源名称关键字
        urlKeyword: "", //资源地址关键字
        pageNum: 1, //
        pageSize: 20, //
      }),
        this.getAllResource();
    },
    //   删除资源
    deleteResource(id) {
      // console.log(id);
      this.$confirm("确定删除资源", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let res = await deleteResource(id);
          if (res.code == 1) {
            this.$message.success("删除资源成功");
            this.getAllResource();
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 资源搜索
    async resourceSearch() {
      let res = await resourceSearch(this.query);
      this.tableData = res.data;
      // console.log("查询", res.data);
    },
    sizeChange(val) {
      this.pageSize = val;
      this.searchMenu();
    },
    currentChange(val) {
      this.pageNum = val;
      this.searchMenu();
    },

    // 资源修改提交
     edit(createForm) {
            this.$refs[createForm].validate(async(valid) => {
        //开启校验
        if (valid) {
          // 如果校验通过，请求接口，允许提交表单
         let res = await editResource(this.editID, this.createForm);
      // console.log("修改成功", res);
      if (res.code == 1) {
        this.$message.success("资源修改成功");
        this.getAllResource();
        this.dialogFormVisible = false;
        this.createForm = {
          description: "", //资源描述
          name: "", //资源名称
          url: "", //资源地址
          categoryId: "", //资源ID
        };
      } else {
        this.$message.error("资源修改失败");
        this.dialogFormVisible = false;
        this.createForm = {
          description: "", //资源描述
          name: "", //资源名称
          url: "", //资源地址
          categoryId: "", //资源ID
        };
      }
        } else {
          //校验不通过
          return false;
        }
      });
     
    },
    // 对话框关闭
    closeDialog() {
            if (this.$refs.createForm) {
        this.$refs.createForm.resetFields();
      }
      this.isCreate = "";
      // this.diaTitle="";
      this.createForm = {
        description: "", //资源描述
        name: "", //资源名称
        url: "", //资源地址
        categoryId: "", //资源ID
      };
    },
    // 修改资源
    editResource(row) {
      this.diaTitle = "资源修改";
      this.createForm = {
        description: row.description, //资源描述
        name: row.name, //资源名称
        url: row.url, //资源地址
        categoryId: row.categoryId, //资源ID
      };
      this.editID = row.id;
      this.dialogFormVisible = true;
    },

    // 获取所有后台资源
    async getAllResource() {
      this.loading = true;
      let res = await Resource();
      if (res.code == 1) {
        this.tableData = res.data;
      }
      this.loading = false;
    },

    // 添加资源
    async createResource() {
      const res = await createResource(this.createForm);
      // console.log("添加", res);
      if (res.code == 1) {
        this.$message.success("资源创建成功");
        this.getAllResource();
        this.dialogFormVisible = false;
        this.createForm = {
          description: "", //资源描述
          name: "", //资源名称
          url: "", //资源地址
          categoryId: "", //资源ID
        };
      } else {
        this.$message.error("资源创建失败");
        this.dialogFormVisible = false;
        this.createForm = {
          description: "", //资源描述
          name: "", //资源名称
          url: "", //资源地址
          categoryId: "", //资源ID
        };
      }
    },
    // 创建提交
    submitForm(createForm) {
       this.$refs[createForm].validate((valid) => {
        //开启校验
        if (valid) {
          // 如果校验通过，请求接口，允许提交表单
          this.createResource();
        } else {
          //校验不通过
          return false;
        }
      });
      
    },
  },
  computed: {},
  mounted() {},
  created() {
    this.getAllResource();
  },
};
</script>

<style lang="scss" scoped>
/deep/ .el-tree-node,
/deep/ .custom-tree-node {
  margin-bottom: 10px;
}
label {
  font-weight: 700;
}
/deep/ .custom-tree-node {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
}
/deep/ .el-dialog__footer {
  text-align: center;
}
</style>
